import { JavascriptGenerator, javascriptGenerator } from "blockly/javascript";
import { Tanslate } from "./translate";
import * as Blockly from 'blockly/core';
import { getValue } from "./com";

export namespace Colors {
    const blocks = [
        {
            "key": "colour_picker",
            "message0": "%1",
            "args0": [
                {
                    "type": "field_colour",
                    "name": "COLOUR",
                    "colour": "#ff0000"
                }
            ],
            "output": "Colour",
            "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
            "style": "colour_blocks",
            "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
            "extensions": [
                "parent_tooltip_when_inline"
            ]
        },
        {
            "key": "colour_random",
            "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
            "output": "Colour",
            "style": "colour_blocks",
            "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
        },
        {
            "key": "colour_rgba",
            "message0": "R:%1 G:%2 B:%3 A:%4",
            "args0": [
                {
                    "type": "field_number",
                    "name": "R",
                    'value': 0,
                },
                {
                    "type": "field_number",
                    "name": "G",
                    'value': 0,
                },
                {
                    "type": "field_number",
                    "name": "B",
                    'value': 0,
                },
                {
                    "type": "field_number",
                    "name": "A",
                    'value': 0,
                }
            ],
            "output": "Colour",
            "inputsInline": true,
            "style": "colour_blocks",
            "tooltip": "%{colour_rgba}"
        },
        {
            "key": "colour_rgba_variable",
            "message0": "R:%1 G:%2 B:%3 A:%4",
            "args0": [
                {
                    "type": "input_value",
                    "name": "R",
                    'check': 'Number',
                },
                {
                    "type": "input_value",
                    "name": "G",
                    'check': 'Number',
                },
                {
                    "type": "input_value",
                    "name": "B",
                    'check': 'Number',
                },
                {
                    "type": "input_value",
                    "name": "A",
                    'check': 'Number',
                }
            ],
            "output": "Colour",
            "style": "colour_blocks",
            "inputsInline": true,
            "tooltip": "%{colour_rgba}"
        },
        {
            "key": "colour_hsla",
            "message0": "H:%1 S:%2 L:%3 A:%4",
            "args0": [
                {
                    "type": "field_number",
                    "name": "H",
                    'value': 0,
                },
                {
                    "type": "field_number",
                    "name": "S",
                    'value': 0,
                },
                {
                    "type": "field_number",
                    "name": "L",
                    'value': 0,
                },
                {
                    "type": "field_number",
                    "name": "A",
                    'value': 0,
                }
            ],
            "output": "Colour",
            "style": "colour_blocks",
            "inputsInline": true,
            "tooltip": "%{colour_hsla}"
        },
        {
            "key": "colour_hsla_variable",
            "message0": "H:%1 S:%2 L:%3 A:%4",
            "args0": [
                {
                    "type": "input_value",
                    "name": "H",
                    'check': 'Number',
                },
                {
                    "type": "input_value",
                    "name": "S",
                    'check': 'Number',
                },
                {
                    "type": "input_value",
                    "name": "L",
                    'check': 'Number',
                },
                {
                    "type": "input_value",
                    "name": "A",
                    'check': 'Number',
                }
            ],
            "output": "Colour",
            "inputsInline": true,
            "style": "colour_blocks",
            "tooltip": "%{colour_hsla}"
        },
    ]
    
    export function init(){
        initGenerator()
        Tanslate.tr(blocks).forEach((item: any) => {
            Blockly.Blocks[item.key] = {
                init: function (this: any) {
                    this.jsonInit(item);
                }
            }
        })
        
    }

    export function getTools() {
        const colorsBlocks = {
            kind: 'category',
            name: Blockly.Msg['colors'],
            colour: 20,
            contents: [] as any[]
        }
        blocks.forEach((item: any) => {
            colorsBlocks.contents.push({
                kind: 'block',
                type: item.key
            })
        })
    
        return colorsBlocks
    }
    
    function initGenerator(){
        javascriptGenerator.forBlock['colour_picker'] = function (block: Blockly.Block) {
            const val = block.getFieldValue('COLOUR');
            return `'${val}'`;
        }

        javascriptGenerator.forBlock['colour_random'] = function () {
            return "`rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`";
        }

        javascriptGenerator.forBlock['colour_rgba'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const R = getValue(block, generator, 'R')
            const G = getValue(block, generator, 'G')
            const B = getValue(block, generator, 'B')
            const A = getValue(block, generator, 'A')
            return `'rgba(${R},${G},${B},${A})'`;
        }

        javascriptGenerator.forBlock['colour_rgba_variable'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const R = getValue(block, generator, 'R')
            const G = getValue(block, generator, 'G')
            const B = getValue(block, generator, 'B')
            const A = getValue(block, generator, 'A')
            if(!R || !G || !B || !A){
                throw new Error(block.id);
            }
            return `'rgba(${R},${G},${B},${A})'`;
        }

        javascriptGenerator.forBlock['colour_hsla'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const H = getValue(block, generator, 'H')
            const S = getValue(block, generator, 'S')
            const L = getValue(block, generator, 'L')
            const A = getValue(block, generator, 'A')
            return `'hsla(${H}deg,${S}%,${L}%,${A})'`;
        }

        javascriptGenerator.forBlock['colour_hsla_variable'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const H = getValue(block, generator, 'H')
            const S = getValue(block, generator, 'S')
            const L = getValue(block, generator, 'L')
            const A = getValue(block, generator, 'A')
            return `'hsla(${H}deg,${S}%,${L}%,${A})'`;
        }
    }
}